<template>
  <div style="height: 100%;width: 100%">
    <div style="height: 50px;">
      <el-row type="flex" :gutter="100" align="bottom">
        <el-col :span="6">
          <el-input style="width: 200px" v-model="courseName" autosize prefix-icon="el-icon-document" placeholder="输入课程名搜索"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input style="width: 200px"  v-model="teacherName" autosize prefix-icon="el-icon-user-solid" placeholder="输入授课教师姓名"></el-input>
        </el-col>
        <el-col :span="6">
          <el-select style="width: 150px" v-model="filterOption" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>

        </el-col>
        <el-col :span="6">
          <el-button  type="primary" icon="document" @click="loadStudentCourse" :loading="searchLoading">搜索</el-button>
        </el-col>
      </el-row>
    </div>
    <div style="height: -webkit-calc(100% - 50px);margin-top: 10px">
      <xjr-table @custom-click="pickCourse" :loading="loading" ref="course_table" :list="tableData" :headers="cols"></xjr-table>
    </div>
  </div>
</template>

<script>
  import common from './course-common'
  export default {
    name: "StudentCourseManage",
    mixins:[common],
    watch:{
      filterOption(newValue,oldValue){
        this.loadStudentCourse();
      }
    },
    data() {
      return {
        cols:[{prop:'courseNo',label:'课程号',sort:false,hidden:true},
          {prop:'courseName',label:'课程名',sort:false,hidden:false},
          {prop:'teacherName',label:'授课教师',sort:false,hidden:false},
          {prop:'createTime',label:'创建时间',sort:true,hidden:false,dataType:'date'},
          {prop:'updateTime',label:'更新时间',sort:true,hidden:false,dataType:'date'},
          {prop:'operate',label:'操作',hidden:false,options:[
              {label:'选课',prop:'pick'},
              {label:'退选',prop:'no-pick',type:'danger'}
            ]}
        ],
        filterOption:'all',
        options:[{
          label:'全部',value:'all'
        },{
          label:'我已选的',value:'my'
        },{
          label:'我未选的',value:'no'
        }],
        myCourseList:[]
      }
    },
    methods:{
      //加载课程列表
      async loadStudentCourse(){
        let g=this;
        g.loading=true;
        g.tableData=[];
        g.myCourseList=[];
        g.myCourseList=(await g.$ajaxGet("/coursePickUpInfo/all",{studentNo:g.userId})).map(pick_up=>{
          return pick_up.courseNo;
        });
        let tableData=await g.loadCourse();
        tableData=tableData.map(d=>{
          if (g.myCourseList.includes(d.courseNo)) {
            g.$set(d, 'disableOptions', ['pick']);
          }
          else{
            g.$set(d, 'disableOptions', ['no-pick']);
          }
          return d;
        });
        //过滤自己选择和未选择的
        if (g.filterOption==='no' || g.filterOption==='my'){
          if (g.filterOption==='no'){//未选择
            g.tableData=tableData.filter(table=>{
              return !(g.myCourseList.includes(table.courseNo));
            })
          }else{
            g.tableData=tableData.filter(table=>{
              return (g.myCourseList.includes(table.courseNo));
            })
          }

        }else{
          g.tableData=tableData;
        }
        g.$nextTick(()=>{
          //必须要重置回去，避免没有数据
          g.$refs.course_table.resetPage();
          g.loading=false;
        })

      },
      //选课和退选按钮按钮
      async pickCourse(index,row,customType){
        let g=this;
        //如果是选课
        if (customType==='pick'){
          let havePick=await g.$ajaxGet("/coursePickUpInfo/param",{courseNo:row.courseNo,studentNo:g.userId});
          if (!g.isNullOrEmpty(havePick)){//不为空说明已选过
            g.message({message:'该课程已选，不可重复选课',type:'warning'})
          }else{//为空可选课
            g.$ajaxPost('/coursePickUpInfo/insert',{studentNo:g.userId,courseNo:row.courseNo,validFlag:1}).then(data=>{
              g.message({message:'选课成功',type:'success',onClose:(instance)=>{
                  g.loadStudentCourse();
                }});
            }).catch(e=>{
              g.$nextTick(()=>{
                g.loadStudentCourse();
              });
            })
          }
        }else{
          let attendance=await g.$ajaxGet('/attendanceParent/all',{courseNo:row.courseNo});
          if (!g.isNullOrEmpty(attendance) && attendance.length>0){
            g.message({message:'该课程已开始考勤,现在无法退选',type:'warning'});
          }else{
            g.$ajaxDelete('/coursePickUpInfo/one',{studentNo:g.userId,courseNo:row.courseNo}).then(res=>{
              g.message({message:'退选成功',type:'success'});
              g.loadStudentCourse();
            })
          }

        }
      }
    },
    created() {
      this.loadStudentCourse();
    }
  }
</script>

<style scoped>

</style>
